<template>
  <div>
    <el-form class="table_serch">
      <div class="table_serch_labe">
        <div class="table_serch_labe_title">机种编码</div>
        <el-autocomplete
          size="mini"
          popper-class="my-autocomplete"
          style="width: 140px; height: 30px; margin-left: 5px; margin-top: 5px"
          v-model="formInline.recipe"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleIconClick"
          >
          </i>
          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="addr">{{ item.address }}</span>
          </template>
        </el-autocomplete>
      </div>

      <!-- 工业 -->
      <div class="table_serch_labe" style="margin-left: 10px">
        <div class="table_serch_labe_title">工单编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.order"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 10px">
        <div class="table_serch_labe_title">线体编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.line"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 5px">
        <div class="table_serch_labe_title">站点编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.site"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 6px">
        <div class="table_serch_labe_title">班次编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.class"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 10px">
        <div class="table_serch_labe_title">缺陷类型</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.errorcode"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe">
        <div class="table_serch_labe_title">起始日期</div>
        <el-form-item label="">
          <el-date-picker
            size="mini"
            v-model="formInline.starttime"
            type="date"
            placeholder="选择日期"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-form-item>
      </div>

      <div class="table_serch_labe">
        <div class="table_serch_labe_title" style="margin-left: 3px">
          结束日期
        </div>
        <el-form-item label="">
          <el-date-picker
            size="mini"
            v-model="formInline.endtime"
            type="date"
            placeholder="选择日期"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 8px">
        <div class="table_serch_labe_title">统计类型</div>
        <el-form-item label="">
          <el-select
            v-model="formInline.type"
            multiple
            placeholder="请选择"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 20px">
        <el-button type="mini" @click="formInlineclick">查询</el-button>
        <el-button type="mini">刷新</el-button>
        <el-button type="mini">运行</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      formInline: {
        recipe: "VR2.1-24",
        order: "",
        line: "",
        site: "",
        starttime: "",
        endtime: "2020-12-14",
        errorcode: "",
        class: "",
        type: [],
      },
      options: [
        {
          value: "选项1",
          label: "yield",
        },
        {
          value: "选项2",
          label: "quality",
        },
        {
          value: "选项3",
          label: "defect",
        },
        {
          value: "选项4",
          label: "activation",
        },
        {
          value: "选项5",
          label: "lightup",
        },
      ],
      restaurants: [],
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
  
  },
  
  methods: {
    formInlineclick() {
      if(this.formInline.recipe == ""){
           this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }else{
        axios({
          url: "http://10.1.108.175:7183/get",
          method: "GET",
          params: {
            data:this.formInline,
          }
         }).then(res => {
          //  console.log(res.data); 
           let  defectstatistics = res.data;
           sessionStorage.setItem('defectstatistics',JSON.stringify(defectstatistics))
        })
      }
    },

    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>
<style scoped>
.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
</style>

